<template>
    <div style="width: 80%;height: 500px;margin:30px auto">
        <div class="row">
            <div class="col-md-3 col-nav">
                <div class="card">
                    <a href="#" style="width: 75%;height: auto;margin: 0 auto" v-on:click="clickPhoto()">
                        <img v-if="loginUser.photo" :src="loginUser.photo" class="card-img-top" alt="..." title="点击更换头像">
                        <img v-if="!loginUser.photo" src="/static/image/img-4.jpg" class="card-img-top" alt="..." title="点击更换头像">
                    </a>
                    <div class="card-body">
                        <h4 class="card-title text-center">{{loginUser.name}}</h4>
                        <h5 class="card-text">账户管理</h5>
                        <hr>
                        <div id="zone-info-sidebar" @click="jump('/zone/info')" class="btn btn-outline-primary" style="width: 100%">
                            个人信息<i class="fa fa-arrow-circle-right"></i>
                        </div>
                        <div id="zone-message-sidebar" @click="jump('/zone/message')" class="btn btn-outline-primary" style="width: 100%">
                            与我相关<i v-show="messageUnreadNum === 0" class="fa fa-arrow-circle-right"></i>
                            <span v-show="messageUnreadNum !== 0" class="badge badge-pill badge-danger">{{messageUnreadNum}}</span>
                        </div>
                        <div id="zone-level-sidebar" @click="jump('/zone/level')" class="btn btn-outline-primary" style="width: 100%">等级信息<i class="fa fa-arrow-circle-right"></i></div>
                        <div id="zone-options-sidebar" @click="jump('/zone/options')" class="btn btn-outline-primary" style="width: 100%">操作记录<i class="fa fa-arrow-circle-right"></i></div>

                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <router-view></router-view>
            </div>
        </div>

        <div id="photo-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">更换头像</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div style="width: 50%;margin: 0 auto">
                                <img v-show="!photo" v-bind:src="loginUser.photo" class="img-fluid">
                                <img v-show="photo" v-bind:src="photo" class="img-fluid">
                            </div>
                        </div>
                        <div class="flex" style="width: 60%;margin: 10px auto 0 auto">
                            <div class="half">
                                <a href="javascript:void(0)" @click="selectFile()">上传头像</a>
                                <file ref="file" v-bind:input-id="'image-upload'"
                                      :text="'上传头像'"
                                      :suffixs="['jpg','jpeg','png']"
                                      :use="FILE_USE.PHOTO.key"
                                      :after-upload="afterUpload"></file>
                            </div>
                            <div class="half text-right">
                                <a href="javascript:void(0)" @click="changePhoto()">换一换</a>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="savePhoto()">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

</template>

<script>
    import File from "../components/File";
    export default {
        name: "Zone",
        components: {File},
        data(){
            return {
                loginUser: {},
                FILE_USE: FILE_USE,

                photo: null,
                photoSeed: 0,
                messageUnreadNum: 0
            }
        },
        watch: {
            $route: {
                handler:function (val,oldVal) {
                    let _this = this;
                    let routeName = _this.$route.name;
                    _this.$nextTick(function () {
                        _this.activeSidebar(routeName.replace("/","-") + "-sidebar");
                    })
                }
            }
        },
        mounted() {
            let _this = this;
            _this.loginUser = Tool.getLoginUser();
            let routeName = _this.$route.name;
            _this.activeSidebar(routeName.replace("/","-") + "-sidebar");

            // 加载头像图片
            _this.loadDefaultPhotos();

            _this.getUnreadMessageNum();
        },
        methods:{

            jump(path) {
                this.$router.push(path);
                this.getUnreadMessageNum();
            },
            getUserName(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/user/get-name/'+_this.loginUser.id).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        _this.loginUser.name = resp.content;
                        _this.$parent.$refs.header.setLoginUser(_this.loginUser);
                    }
                })
            },
            loadDefaultPhotos(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/file/file/get-default-photo').then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        _this.defaultPhotos = resp.content;
                    }
                })
            },
            selectFile(){
                this.$refs.file.selectFile();
            },
            activeSidebar: function (id) {
                $("#"+id).siblings().removeClass("active");
                $("#"+id).addClass("active");
            },
            clickPhoto(){
                let _this = this;
                _this.photo = null;
                $("#photo-modal").modal("show");
                if(Tool.isEmpty(_this.defaultPhotos)){
                    _this.loadDefaultPhotos();
                }
            },
            afterUpload(resp){
                let _this = this;
                let photo = resp.content.path;
                _this.photo = photo;
                // this.$forceUpdate()
            },

            savePhoto(){
                let _this = this;
                if(!_this.photo){
                    Toast.warning('请上传图片！');
                    return;
                }
                _this.loginUser.photo = _this.photo;
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/user/user/set-photo', _this.loginUser).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        Toast.success('保存成功');
                        $("#photo-modal").modal('hide');
                        _this.$parent.$refs.header.setLoginUser(_this.loginUser);
                    }

                })
            },
            changePhoto(){
                let _this = this;
                let photoSeed = Math.floor(Math.random() * _this.defaultPhotos.length);
                while(photoSeed === _this.photoSeed){
                    photoSeed = Math.floor(Math.random() * _this.defaultPhotos.length);
                }
                _this.photo = _this.defaultPhotos[photoSeed];
                _this.photoSeed = photoSeed;
            },
            getUnreadMessageNum() {
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/message/countUnread').then(response=>{
                    let resp = response.data;
                    if (resp.success) {
                        _this.messageUnreadNum = resp.content;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .flex{
        display: flex;
    }
    .half{
        width: 50%;
    }
    a{
        text-decoration: none;
    }
    img{
        border-radius: 50%;
        border: 5px solid rgb(217,221,225);
    }
</style>